{% extends "base.html" %}

{% block content %}
<div class="bg-white rounded-lg shadow-card p-6 mb-6">
  <h2 class="text-xl font-bold mb-4 flex items-center">
    <i class="fa fa-sign-in text-green-500 mr-2"></i> 入库操作
  </h2>
  
  <form action="{{ url_for('stock.stock_in') }}" method="post" enctype="multipart/form-data" class="space-y-4">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
      <div class="md:col-span-2">
        <label class="block text-sm font-medium text-gray-700 mb-1">选择设备</label>
        <select name="name" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary">
          {% for device in devices %}
            <option value="{{ device.name }}">{{ device.name }} (当前库存: {{ device.quantity }}{{ device.unit }})</option>
          {% endfor %}
        </select>
      </div>
      
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">入库数量</label>
        <input name="amount" type="number" min="1" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary" required>
      </div>
      
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">入库日期</label>
        <input type="datetime-local" name="operation_date" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary" required value="{{ current_datetime }}">
      </div>
    </div>
    
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">上传照片</label>
      <div class="flex items-center justify-center w-full">
        <label class="flex flex-col rounded-lg border-2 border-dashed w-full h-40 p-10 group text-center">
          <div class="h-full w-full text-center flex flex-col items-center justify-center">
            <div class="flex flex-auto">
              <svg class="w-10 h-10 text-gray-400 group-hover:text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
              </svg>
            </div>
            <p class="text-sm text-gray-500 group-hover:text-green-600 pt-1">点击上传或拖拽照片</p>
            <p class="text-xs text-gray-400">支持 PNG, JPG, JPEG, GIF 格式，最大 16MB</p>
          </div>
          <input type="file" name="photo" class="hidden" accept="image/*" required />
        </label>
      </div>
    </div>
    
    <div class="flex justify-end">
      <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-custom">
        <i class="fa fa-check mr-2"></i> 提交入库
      </button>
    </div>
  </form>
</div>

<div class="bg-white rounded-lg shadow-card p-6">
  <h2 class="text-xl font-bold mb-4 flex items-center">
    <i class="fa fa-history text-gray-500 mr-2"></i> 最近入库记录
  </h2>
  
  <div class="overflow-x-auto">
    <table class="min-w-full divide-y divide-gray-200">
      <thead class="bg-gray-50">
        <tr>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">设备名称</th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数量</th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">照片</th>
        </tr>
      </thead>
      <tbody class="bg-white divide-y divide-gray-200">
        {% for record in recent_in_history %}
          <tr class="hover:bg-gray-50 transition-custom">
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ record.timestamp }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ record.device_name }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ record.amount }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
              {% if record.photo_path %}
                <a href="{{ url_for('report.view_photo', filename=record.photo_path) }}" target="_blank" class="text-primary hover:text-primary/80">
                  <i class="fa fa-image mr-1"></i> 查看
                </a>
              {% else %}
                无照片
              {% endif %}
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  
  <div class="mt-4 text-right">
    <a href="{{ url_for('report.history') }}" class="text-primary hover:text-primary/80 text-sm font-medium transition-custom">
      查看全部记录 <i class="fa fa-arrow-right ml-1"></i>
    </a>
  </div>
</div>
{% endblock %}    